<template>
  <div class="front">
    <main>
      <div class="container_avatar">
        <img :src="useravatar_url">
      </div>
      <div class="container">
        <input type="text" placeholder="请输入唠嗑号" v-model="username">
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
      <div class="container_second">
        <input type="password" placeholder="请输入密码" v-model="userpassword">
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
      <div class="container_btn">
        <button @click="logIn">点击登录</button>
        <button @click="signIn">立即注册</button>
      </div>
      <br>
    </main>
    <div class="circle1"></div>
    <div class="circle2"></div>
  </div>
</template>

<script>
import axios from "axios";
import {changeDB} from "../db";

export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      useravatar_url: require('../assets/avatar.png'),
      userpassword: '',
      userid: '',
    }
  },
  mounted() {
    localStorage.setItem('is_login', '0');
  },
  methods: {
    logIn() {
      if (this.userpassword === '' || this.username === '') {
        this.$notify({
          message: '请填写必要信息'
        });
      } else {
        axios.post("http://81.70.70.110:4396/account/login", null,
            {
              params: {password: this.userpassword, userId: parseInt(this.username)}, headers: {}
            }).then(res => {
          let j = res.data;
          if (j.code === 200) {
            this.$message.success({
              message: j.msg,
              center: true
            });
            //一个username唯一对应一个token
            localStorage.setItem('u_id', this.username);
            localStorage.setItem('u_token', j.data.token);
            localStorage.setItem('u_password', this.userpassword);
            localStorage.setItem('is_login', '1');
            this.getInfo();
            changeDB(+this.username)
            // window.startTimer && window.startTimer()
            this.$router.push({path: '/home/contact'});
          } else {
            this.$message.error({
              message: j.msg,
              center: true
            });
            this.username = '';
            this.userpassword = '';
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    setAvatar(avatarSrc){
      var reader = new FileReader();
      let t = localStorage.getItem('u_token');
      axios.get("http://81.70.70.110:4396/file/download/" + avatarSrc,
          {headers: {token : t},
            responseType: "blob"}).then(res => {
        reader.onload = function(){
          localStorage.setItem('avatarURL', reader.result);
        }
        reader.readAsDataURL(res.data);
      })
    },
    getInfo(){
      let t = localStorage.getItem('u_id');
      let tt = localStorage.getItem('u_token');
      axios.get("http://81.70.70.110:4396/account/info",  {
        params: {key: 'id', scope: 'all', value: t}, headers: {token: tt}
      }).then(res => {
        let j = res.data;
        if (j.code === 200) {
          this.setAvatar(j.data.userAvatar);
          this.$store.state.selfAvatar = j.data.userAvatar
          if(j.data.sign === null){
            localStorage.setItem('u_signature', "还没有签名，签个名吧~");
          }
          else {
            localStorage.setItem('u_signature', j.data.sign);
          }
          localStorage.setItem('u_nickname', j.data.userName);
          localStorage.setItem('is_login', '2');

        } else {
        }
      }).catch(err => {
      })
    },
    signIn() {
      this.$router.push({path: '/signin'});
    }
  },
}
</script>

<style scoped>
.front {
  min-height: 100vh;
  background: linear-gradient(to right top, #65dfc9, #6cdbeb);
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  min-height: 60vh;
  width: 55%;
  border-radius: 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

main::after {
  background-color: rgba(255, 255, 255, .3);
  filter: blur(5px);
}

.container_avatar {
  position: absolute;
  top: 23vh;
  height: 20vh;
  width: 20vh;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 11vh;
}

.container {
  position: absolute;
  top: 45vh;
  height: 5.5vh;
  width: 35%;
}

.container_second {
  position: absolute;
  top: 53vh;
  height: 5.5vh;
  width: 35%;
}

.container_btn {
  position: absolute;
  top: 61vh;
  height: 7vh;
  width: 35%;
  left: 33vw;
}

p {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 1.3vh;
}

input {
  width: 100%;
  height: 100%;
  position: relative;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 5px;
  color: #31c6ef;
  background: rgba(255, 255, 255, .3);
}

span {
  position: absolute;
  content: "";
  display: block;
  background-color: #6cdbeb;
  transition: transform .1s ease-in-out;
}

.top,
.bottom {
  left: 0px;
  right: 0px;
  height: 1.5px;
}

.left,
.right {
  top: 0px;
  bottom: 0px;
  width: 2px;
  transform: scaleY(0);
}

.bottom {
  bottom: 0px;
}

.right {
  right: 0px;
  transform-origin: top center;
  transition-delay: .1s;
}

.top {
  top: 0px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: .2s;

}

.left {
  left: 0px;
  transform-origin: bottom center;
  transition-delay: .3s;
}

input:focus ~ .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}

input:focus ~ .left {
  transform: scaleY(1);
  transform-origin: top center;
}

input:focus ~ .top {
  transform: scaleX(1);
  transform-origin: right center;
}

button:first-child {
  height: 100%;
  width: 44%;
  border-radius: 1.5vh;
  border: none;
  outline: none;
  font-size: 2.3vh;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, .3);
  right: 2vh;
}

button:last-child {
  height: 100%;
  width: 44%;
  border-radius: 1.5vh;
  border: none;
  outline: none;
  font-size: 2.3vh;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, .3);
}

button:first-child:hover {
  background: linear-gradient(90deg, #3ca8eb, #65dfc9, #f2369d, #14dff5);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}

button:last-child:hover {
  background: linear-gradient(90deg, #83c4ec, #ec23c4, #e19cf8);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}

button:before {
  content: '';
  position: absolute;
  background: inherit;
  top: -0.5vh;
  right: -0.5vh;
  bottom: -0.5vh;
  left: -0.5vh;
  border-radius: 2vh;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}

button:hover:before {
  opacity: 1;
  z-index: -1;
}


.circle1,
.circle2 {
  background: white;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
  height: 17vh;
  width: 17vh;
  position: absolute;
  border-radius: 50%;
}

.circle1 {
  top: 14%;
  right: 18%;
}


.circle2 {
  bottom: 14%;
  left: 18%;
}
</style>
